<template>
  <el-config-provider :locale="zhCn">
    <router-view></router-view>
  </el-config-provider>
  <canvas id="canvas"></canvas>
</template>
<script lang="ts" setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ref, computed, watchEffect } from 'vue'
import utils from './utils/utils';
// import { aConfigProvider } from 'ant-design-vue'
// import { ElConfigProvider } from 'element-plus'
function bodyScale() {
  // let deviceWidth = document.documentElement.clientWidth;
  // let scale = deviceWidth / 1920;
  // // 添加最小缩放限制，防止过度缩小
  // scale = Math.max(scale, 0.8);
  // document.documentElement.style.zoom = scale + '';
}

const theme = utils.getTheme();
// 添加防抖处理
let resizeTimer;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(bodyScale, 100);
}, false);
// 初始化时执行一次
bodyScale();

// 动态更新 CSS 变量
watchEffect(() => {
  document.documentElement.style.setProperty(
    '--dynamic-label-color',
    theme === 'light' ? '#333' : '#fff'
  );
  document.documentElement.style.setProperty(
    '--dynamic-radio-color',
    theme === 'light' ? '#000' : '#fff'
  );
});

document.addEventListener('click', function(e) {
    const effect = document.createElement('div');
    effect.className = 'click-effect';
    effect.style.left = e.clientX + 'px';
    effect.style.top = e.clientY + 'px';
    document.body.appendChild(effect);
    
    // 动画结束后移除元素
    effect.addEventListener('animationend', function() {
      effect.remove();
    });
  });

  document.addEventListener('DOMContentLoaded', () => {
  const body = document.body;
  const trailCount = 100; // 拖尾粒子数量
  const trails = [];

  // 创建拖尾粒子
  for (let i = 0; i < trailCount; i++) {
    const trail = document.createElement('div');
    trail.className = 'trail';
    trail.style.opacity = '0'; // 初始透明
    body.appendChild(trail);
    trails.push(trail);
  }

  let currentTrail = 0;

  // 鼠标移动时更新粒子位置
  document.addEventListener('mousemove', (e) => {
    const trail = trails[currentTrail];
    trail.style.left = `${e.clientX}px`;
    trail.style.top = `${e.clientY}px`;
    trail.style.opacity = 0.8; // 显示粒子
    trail.style.transition = 'none'; // 取消过渡以实现瞬移效果

    // 添加渐变色（随机变化）
    const hue = Math.random() * 360;
    trail.style.background = `linear-gradient(45deg, hsl(${hue}, 100%, 50%), hsl(${(hue + 60) % 360}, 100%, 50%)`;

    setTimeout(() => {
      trail.style.transition = 'opacity 0.8s, transform 0.8s';
      trail.style.opacity = 0; // 渐隐
      trail.style.transform = `translate(-50%, -50%) scale(2)`; // 放大消失
    }, 10);

    currentTrail = (currentTrail + 1) % trailCount; // 循环使用粒子
  });
});

</script>
<style>
/* 全局样式 */
.el-form-item__label {
  color: var(--dynamic-label-color) !important;
}
.el-radio {
  color: var(--dynamic-radio-color) !important;
}
</style>